<template>
  <div>
    <el-scrollbar style="height: calc(100vh - 64px)">
      <transition
        :duration="{ enter: 800, leave: 100 }"
        mode="out-in"
        name="el-fade-in-linear"
      >
        <el-menu
          :collapse="isCollapse"
          :collapse-transition="true"
          :default-active="active"
          @select="selectMenuItem"
          active-text-color="#fff"
          class="el-menu-vertical"
          text-color="#DBDBDB"
          unique-opened
        >
          <template v-for="item in asyncRouters[0].children">
            <aside-component
              :key="item.name"
              :routerInfo="item"
              v-if="!item.hidden"
            />
          </template>
        </el-menu>
      </transition>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import AsideComponent from "./asideComponent";
export default {
  name: "Aside",
  data() {
    return {
      active: "",
      isCollapse: false,
    };
  },
  methods: {
    ...mapMutations("history", ["addHistory"]),
    selectMenuItem(index, _, ele) {
      const query = {};
      const params = {};
      ele.route.parameters &&
        ele.route.parameters.map((item) => {
          if (item.type == "query") {
            query[item.key] = item.value;
          } else {
            params[item.key] = item.value;
          }
        });
      if (index === this.$route.name) return;
      if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
        window.open(this.resertPath(index));
      } else {
        this.$router.push({ name: index, query, params });
      }
    },
    // 如果是风险看板，需要在后面进行拼接code跳转
    resertPath(path) {
      return ""
      // if (path) {
      //   const sm4 = require("sm-crypto-gxmicro").sm4;
      //   const nowTime = Math.round(new Date().getTime() / 1000).toString();
      //   const code = `${this.userInfo.mobile}:${nowTime}`;
      //   const publicKey = sm4.encrypt(code, "7d14b8ee3ae4f82be69273d6e637345a");
      //   let url = "";
      //   if (path.indexOf("?") < 0) {
      //     url = `${path}?code=${publicKey}`;
      //   } else {
      //     url = `${path}&code=${publicKey}`;
      //   }
      //   return url;
      // }
    },
  },
  computed: {
    ...mapGetters("router", ["asyncRouters"]),
    ...mapGetters("user", ["userInfo"]),
  },
  components: {
    AsideComponent,
  },
  created() {
    this.active = this.$route.name;
    let screenWidth = document.body.clientWidth;
    if (screenWidth < 1000) {
      this.isCollapse = !this.isCollapse;
    }

    this.$bus.on("collapse", (item) => {
      this.isCollapse = item;
    });
  },
  watch: {
    $route() {
      this.active = this.$route.name;
    },
  },
  beforeDestroy() {
    this.$bus.off("collapse");
  },
};
</script>

<style lang="scss">
.el-scrollbar {
  .el-scrollbar__view {
    height: 100%;
  }
}
.menu-info {
  .menu-contorl {
    line-height: 52px;
    font-size: 20px;
    display: table-cell;
    vertical-align: middle;
  }
}
</style>
